<template>
    <div style="width: 50%;margin: 0 auto;padding-top: 20px">
        <div style="margin: 50px 0;text-align: center;">
            <a-tag color="orange">
                <span style="font-size: 24px;padding: 5px">
                    recaptcha Demo
                </span>
            </a-tag>
        </div>
        <a-form layout="vertical">
            <a-form-item label="projectID" name="projectID">
                <a-input
                        v-model:value="state.projectID"
                        allowClear
                        placeholder="请输入projectId"
                />
            </a-form-item>

            <a-form-item label="recaptchaKey" name="recaptchaKey">
                <a-input
                        v-model:value="state.recaptchaKey"
                        allowClear
                        placeholder="请输入recaptchaKey"
                />
            </a-form-item>
            <a-form-item label="recaptchaAction" name="recaptchaKey">
                <a-input
                        v-model:value="state.recaptchaAction"
                        allowClear
                        placeholder="请输入recaptchaAction"
                />
            </a-form-item>
        </a-form>

        <div>

            <a-button
                    type="primary"
                    @click="getToken"

            >token获取</a-button
            >


        </div>
      <div style="margin-top: 20px">
          <a-input v-model:value="state.token" readonly></a-input>
      </div>


        <div>

            <div class="g-recaptcha" :data-sitekey="state.recaptchaKey" :data-action="state.recaptchaAction" style="min-height: 50px;margin-top: 10px"></div>
        </div>

        <div style="margin-top: 100px">

            <a-button
                    type="primary"
                    @click="veRify"

            >verify验证token</a-button
            >
        </div>

    </div>
</template>
<script setup lang="ts">
    import {reactive} from 'vue'
    // @ts-ignore
    import {verifyWeb} from '@/service/verify/index.ts'

    const state=reactive({
        title:'verigy',
        projectID:'mysitetest-1717001267561',
        recaptchaKey:'6LcyBuspAAAAAOYbbokZ02FEDCxs0OH9RKN5xFWz',
        token:'',
        recaptchaAction:'action-name'
    });

    const getToken=()=>{
        // @ts-ignore
        grecaptcha.enterprise.ready(async () => {
            // @ts-ignore
            const token = await grecaptcha.enterprise.execute(state.recaptchaKey, {action: state.recaptchaAction});
            console.log('token',token)
            state.token=token
        });
    }
    const veRify=async ()=>{
        // @ts-ignore
        const tokenGrade=await verifyWeb({
            projectID:state.projectID,
            recaptchaKey:state.recaptchaKey,
            token:state.token,
            recaptchaAction:state.recaptchaAction
        })

        console.log('tokenGrade',tokenGrade)
    }
</script>
